import TableRender from '@/render/TableRender'
import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import toNative from '@/utils/toNative'
import CDrawer from '@/components/drawer/Index'
import BasicInfoView from './BasicInfo'
import WorkRecord from './WorkRecord'
import WorkInfo from './WorkInfo'
import { Button } from 'ant-design-vue'

@Component
export class DrawerStaffDetail extends TableRender {
    @Prop() show!: boolean
    @Prop() userId!: number

    showDrawer = false

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Emit('refresh')
    handleRefresh() {}

    @Watch('show', { immediate: true })
    async handleWatchShow() {
        this.showDrawer = this.show
    }

    @Watch('showDrawer', { immediate: true })
    handleWatchShowDialog() {
        this.updateShow(this.showDrawer)
    }


    render() {
        return (
            <CDrawer
                v-model:show={this.showDrawer}
                size={600}
                resetStyle={true}
                showClose={false}
                withHeader={false}
                v-slots={{
                    default: () => {
                        return <div>
                            <BasicInfoView userId={this.userId}/>
                            <WorkRecord userId={this.userId}/>
                            <WorkInfo userId={this.userId}/>
                        </div>
                    },
                    footer: () => {
                        return (
                            <>
                                <Button type="primary" onClick={() => this.showDrawer = false}>
                                        确定
                                </Button>
                            </>
                        )
                    }
                }}
            ></CDrawer>
        )
    }
}

export default toNative<{ userId: number }, { refresh: () => void }>(DrawerStaffDetail)
